<template>
  <div class="bg">

    <div class="content">

      <a-card :hoverable="true" style="width: 400px">
        <p style="text-align: center;font-size: large;color: blue">Lte Admin</p>
        <a-form id="components-form-demo-normal-login" :form="form" class="login-form" @submit="handleSubmit">

          <a-form-item>
            <a-input :allowClear="allowClear"
                     v-decorator="['username', { rules: [{ required: true, message: 'Please input your account!' }] } ]"
                     placeholder="账号">
              <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-input :allowClear="allowClear" type="password"
                     v-decorator="['password', { rules: [{ required: true, message: 'Please input your Password!' }] } ]"
                     placeholder="密码">
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-checkbox v-decorator="[ 'rememberMe', { valuePropName: 'checked', initialValue: true }]">
              记住我
            </a-checkbox>
            <a-button type="primary" html-type="submit" class="login-form-button">
              登录
            </a-button>
          </a-form-item>

        </a-form>
      </a-card>

    </div>

  </div>
</template>

<script>
const sysSetting = require("../../mock/my-setting.json");
import {loginApi} from "@/api/backend-api/login";

export default {
  name: "Auth",
  data() {
    return {
      captcha: '',
      captchaUUID: '',
      allowClear: true,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, {name: 'normal_login'})
    }
  },
  created() {
    console.log(this.$route);
    let routeNameTarget = this.$route.name;
    let routeQueryTarget = this.$route.query;
    console.log(routeNameTarget);
    console.log(routeQueryTarget);


  },
  mounted() {
    console.log(
        `%c lte-admin %c Design by antdv %c`,
        'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
        'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
        'background:transparent'
    );


  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          let reqParam = values;

          loginApi(reqParam).then(res => {
            if (res.data.code === 0) {
              console.log('login res ---', res.data.data)
              sessionStorage.setItem('tokenInfo', JSON.stringify(res.data.data));
              this.$message.success('登陆成功!');
              this.$router.push({path: '/defaultHome'})
            } else {
              this.$message.error(res.data.msg);
            }
          });

        }
      });

    }
  }
}
</script>

<style scoped>
.bg {
  background-image: url("../../public/img/bg_starry.jpg");
  height: 100%;
}

.content {
  /*margin: 0 auto;*/
  /*top: 100px;*/
  /*position: relative;*/

  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateY(-30%);
  transform: translateX(-50%);





}

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
  float: right;
}

#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>
